<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 400px;
				height: 400px;
				position: relative;
			}

			.img {
				width: 400px;
				height: 400px;
				position: absolute;
				top: 0;
				left: 0;
				text-align: center;
				font-size: 40px;
				z-index: 0;
			}

			#myCan {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				margin: 0 auto;
				/* background-color: lightskyblue; */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="img">谢谢惠顾</div>
			<canvas id="myCan" width="400" height="400"></canvas>
		</div>
		<script type="text/javascript">
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');

			// var oImg1 = new Image();
			// oImg1.src = '../images/2.gif';
			// oImg1.onload = function() {
			// 	ctx.drawImage(oImg1, 0, 0, 400, 400);
			// }
			var oImg = new Image();
			oImg.src = '../images/1.jpg';
			oImg.onload = function() {
				ctx.drawImage(oImg, 0, 0, 400, 400);
			}
			oC.onmousedown = function(e) {
				var disX = e.offsetX - oC.offsetLeft;
				var disY = e.offsetY - oC.offsetTop;
				console.log(disX, disY);
				ctx.beginPath();
				ctx.moveTo(disX, disY);
				document.onmousemove = function(e) {
					var l = e.clientX - oC.offsetLeft;
					var t = e.clientY - oC.offsetTop;
					ctx.lineWidth = 20;
					ctx.lineTo(l, t);
					ctx.stroke();
					// ctx.arc(l,t,20,0,2*Math.PI);
					// ctx.lineTo(l,t);
					// ctx.fill();

					ctx.globalCompositeOperation = "destination-out";
				}
				document.onmouseup = function() {
					document.onmousemove = document.onmouseup = null;
				}
				return false;
			}
		</script>
	</body>
</html>
